<template>
	<el-card>
		<!-- 数据添加按钮 -->
		<div class="head">
			<el-button type="primary" @click="addBtn" style="font-size: large"
				>+</el-button
			>
			<el-input
				v-model="userPage.keyword"
				style="width: 200px; margin: 0 1vw 0 1vw; height: 32px"
			/>
			<el-button @click="getUserList()">搜索</el-button>
			<!-- http://192.168.0.192:8000/api/excel -->

			<div class="right">
				<el-upload
					ref="upload"
					class="upload-demo"
					action="http://127.0.0.1:8000/api/excel"
					:limit="20"
					:on-success="uploadSuccess"
					:auto-upload="true"
					:headers="header"
					:show-file-list="false"
				>
					<template #trigger>
						<el-button type="primary">批量上传</el-button>
					</template>
				</el-upload>
			</div>
		</div>
		<!-- 表格展示 -->
		<el-table class="table-s" :data="UserList">
			<el-table-column label="编码" prop="number" />
			<el-table-column label="姓名" prop="name" />
			<el-table-column label="性别" prop="sex" />
			<el-table-column label="证件类型" prop="ID_type" />
			<el-table-column label="证件号码" prop="user_ID" />
			<el-table-column
				label="出生日期"
				prop="birth_data"
				:formatter="timeFormatter"
			/>
			<el-table-column label="手机号" prop="phone" />
			<el-table-column label="邮箱" prop="email" />
			<el-table-column label="学历" prop="education" />
			<el-table-column label="岗位" prop="job" />
			<el-table-column label="是否在职">
				<template #default="scope">
					<span v-if="scope.row.dimission_time" style="color: red">
						离职日期:{{ scope.row.dimission_time }}
					</span>
					<span v-else style="color: aqua"> 在职 </span>
				</template>
			</el-table-column>
			<el-table-column
				label="入职日期"
				prop="entry_time"
				:formatter="timeFormatter"
			>
			</el-table-column>
			<el-table-column
				label="工资始发日期"
				prop="salary_start"
				:formatter="timeFormatter"
			/>
			<el-table-column
				label="转正日期"
				prop="regular_time"
				:formatter="timeFormatter"
			/>
			<el-table-column label="银行名称" prop="bank_name" />
			<el-table-column label="银行账户名称" prop="bank_account" />
			<el-table-column label="银行卡号" prop="bank_ID" />
			<el-table-column label="社保状态" prop="social_state" />
			<el-table-column label="社保缴纳基数" prop="social_cardinal" />
			<el-table-column label="养老保险" prop="provide_insurance" />
			<el-table-column label="医疗保险" prop="medical_insurance" />
			<el-table-column label="失业保险" prop="unemployment_insurance" />
			<el-table-column label="公积金" prop="accumulation" />
			<el-table-column label="工会费" prop="admission" />
			<el-table-column label="工资比率" prop="salarys" />
			<el-table-column label="部门" prop="college__name" />
			<el-table-column label="基础工资" prop="basic_wage" />
			<el-table-column fixed="right" label="操作" width="200">
				<template #default="scope">
					<el-button
						link
						type="danger"
						size="small"
						@click.prevent="deleteRow(scope.row)"
					>
						删除
					</el-button>
					<el-button
						link
						type="primary"
						size="small"
						@click.prevent="updateRowBtn(scope.row)"
					>
						修改
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>

	<el-pagination
		v-model:currentPage="userPage.page"
		v-model:page-size="userPage.pagesize"
		:page-sizes="[5, 10, 15, 20]"
		:small="small"
		:disabled="disabled"
		:background="background"
		layout="total, sizes, prev, pager, next, jumper"
		:total="total"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
	/>

	<!-- 添加弹出层 -->
	<el-drawer
		v-model="draweradd"
		:direction="direction"
		class="drawerAdd"
		:size="'50%'"
		:close-on-click-modal="false"
		:close-on-press-escape="true"
		:before-close="closeDrawer"
		:destroy-on-close="true"
	>
		<template #title>
			<h4 v-if="formStatus == 'update'">修改用户</h4>
			<h4 v-else>新增用户</h4>
		</template>
		<template #default>
			<div>
				<!-- 添加弹出层 -->
				<el-form
					v-show="formStatus == ''"
					:label-position="'center'"
					label-width="100px"
					:inline="true"
					:model="addForm"
					class="demo-form-inline"
					:size="'50%'"
					:rules="addRule"
					ref="addFormRef"
					status-icon
				>
					<el-form-item label="姓名" prop="name">
						<el-input v-model="addForm.name" placeholder="姓名" />
					</el-form-item>
					<el-form-item label="性别" prop="sex">
						<el-select v-model="addForm.sex" placeholder="性别">
							<el-option label="男" value="1" />
							<el-option label="女" value="0" />
						</el-select>
					</el-form-item>
					<el-form-item label="编码" prop="number">
						<el-input v-model.number="addForm.number" placeholder="编码" />
					</el-form-item>
					<el-form-item label="证件类型" prop="ID_type">
						<el-select
							v-model="addForm.ID_type"
							placeholder="证件类型"
						>
							<el-option label="身份证" value="身份证" />
						</el-select>
					</el-form-item>
					<el-form-item label="证件号码" prop="user_ID">
						<el-input
							v-model="addForm.user_ID"
							placeholder="证件号码"
						/>
					</el-form-item>
					<el-form-item label="出生日期" prop="birth_data">
						<el-date-picker
							v-model="addForm.birth_data"
							format="YYYY/MM/DD"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="出生日期"
							:size="'default'"
						/>
					</el-form-item>
					<el-form-item label="手机号" prop="phone">
						<el-input
							v-model="addForm.phone"
							placeholder="手机号"
						/>
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="addForm.email" placeholder="邮箱" />
					</el-form-item>
					<el-form-item label="学历" prop="education">
						<el-input
							v-model="addForm.education"
							placeholder="学历"
						/>
					</el-form-item>
					<el-form-item label="岗位" prop="job">
						<el-input v-model="addForm.job" placeholder="岗位" />
					</el-form-item>
					<el-form-item label="入职日期" prop="entry_time">
						<el-date-picker
							v-model="addForm.entry_time"
							format="YYYY/MM/DD"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="入职日期"
							:size="'default'"
						/>
					</el-form-item>
					<el-form-item label="工资始发日期" prop="salary_start">
						<el-date-picker
							v-model="addForm.salary_start"
							format="YYYY/MM/DD"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="工资始发日期"
							:size="'default'"
						/>
					</el-form-item>
					<el-form-item label="转正日期" prop="regular_time">
						<el-date-picker
							v-model="addForm.regular_time"
							format="YYYY/MM/DD"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="转正日期"
							:size="'default'"
						/>
					</el-form-item>
					<el-form-item label="银行账户名称" prop="bank_account">
						<el-input
							v-model="addForm.bank_account"
							placeholder="银行账户名称"
						/>
					</el-form-item>
					<el-form-item label="银行名称" prop="bank_name">
						<el-select
							v-model="addForm.bank_name"
							placeholder="银行名称"
						>
							<el-option label="工商银行" value="工商银行" />
							<el-option label="建设银行" value="建设银行" />
							<el-option label="邮政银行" value="邮政银行" />
						</el-select>
					</el-form-item>
					<el-form-item label="银行卡号" prop="bank_ID">
						<el-input
							v-model="addForm.bank_ID"
							placeholder="银行卡号"
						/>
					</el-form-item>
					<el-form-item label="社保状态" prop="social_state">
						<el-select
							v-model="addForm.social_state"
							placeholder="社保状态"
						>
							<el-option label="参保缴费" value="参保缴费" />
							<el-option label="冻状态" value="冻状态" />
							<el-option label="暂停缴费" value="暂停缴费" />
						</el-select>
					</el-form-item>
					<el-form-item label="社保缴纳基数" prop="social_cardinal">
						<el-input
							v-model="addForm.social_cardinal"
							placeholder="社保缴纳基数"
						/>
					</el-form-item>
					<el-form-item label="养老保险" prop="provide_insurance">
						<el-input
							v-model="addForm.provide_insurance"
							placeholder="养老保险"
						/>
					</el-form-item>
					<el-form-item label="医疗保险" prop="medical_insurance">
						<el-input
							v-model="addForm.medical_insurance"
							placeholder="医疗保险"
						/>
					</el-form-item>
					<el-form-item
						label="失业保险"
						prop="unemployment_insurance"
					>
						<el-input
							v-model="addForm.unemployment_insurance"
							placeholder="失业保险"
						/>
					</el-form-item>
					<el-form-item label="公积金" prop="accumulation">
						<el-input
							v-model="addForm.accumulation"
							placeholder="公积金"
						/>
					</el-form-item>

					<el-form-item label="工会费" prop="admission">
						<el-input
							v-model="addForm.admission"
							placeholder="工会费"
						/>
					</el-form-item>
					<el-form-item label="工资比率" prop="salarys">
						<el-input
							v-model="addForm.salarys"
							placeholder="工资比率"
						/>
					</el-form-item>

					<el-form-item label="基础工资" prop="basic_wage">
						<el-input
							v-model="addForm.basic_wage"
							placeholder="基础工资"
						/>
					</el-form-item>
					<el-form-item label="角色" prop="role_id">
						<el-select
							v-model="addForm.role_id"
							multiple
							placeholder="Select"
							style="width: 240px"
							aria-placeholder="角色"
						>
							<el-option label="员工" value="staff" />
							<el-option label="管理员" value="admin" />
							<el-option label="总理" value="boss" />
						</el-select>
					</el-form-item>
					<el-form-item label="部门" prop="college_id">
						<el-select
							v-model="addForm.college_id"
							placeholder="部门"
						>
							<el-option
								v-for="item of tableData"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							/>
						</el-select>
					</el-form-item>
				</el-form>
				<!-- 修改弹出层 -->
				<el-form
					v-show="formStatus == 'update'"
					:label-position="'center'"
					label-width="100px"
					:inline="true"
					:model="updateForm"
					class="demo-form-inline"
					:size="'50%'"
				>
					<el-form-item label="姓名">
						<el-input
							v-model="updateForm.name"
							placeholder="姓名"
						/>
					</el-form-item>
					<el-form-item label="性别">
						<el-select v-model="updateForm.sex" placeholder="性别">
							<el-option label="男" value="1" />
							<el-option label="女" value="0" />
						</el-select>
					</el-form-item>
					<el-form-item label="编码" prop="number">
						<el-input
							v-model="updateForm.number"
							placeholder="编码"
						/>
					</el-form-item>
					<el-form-item label="证件类型">
						<el-select
							v-model="updateForm.ID_type"
							placeholder="证件类型"
						>
							<el-option label="身份证" value="身份证" />
						</el-select>
					</el-form-item>
					<el-form-item label="证件号码">
						<el-input
							v-model="updateForm.user_ID"
							placeholder="证件号码"
						/>
					</el-form-item>
					<el-form-item label="出生日期">
						<el-date-picker
							v-model="updateForm.birth_data"
							format="YYYY/MM/DD"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="出生日期"
							:size="'default'"
						/>
					</el-form-item>
					<el-form-item label="手机号">
						<el-input
							v-model="updateForm.phone"
							placeholder="手机号"
						/>
					</el-form-item>
					<el-form-item label="邮箱">
						<el-input
							v-model="updateForm.email"
							placeholder="邮箱"
						/>
					</el-form-item>
					<el-form-item label="学历">
						<el-input
							v-model="updateForm.education"
							placeholder="学历"
						/>
					</el-form-item>
					<el-form-item label="岗位">
						<el-input v-model="updateForm.job" placeholder="岗位" />
					</el-form-item>
					<el-form-item label="入职日期">
						<el-date-picker
							v-model="updateForm.entry_time"
							format="YYYY/MM/DD"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="入职日期"
							:size="'default'"
						/>
					</el-form-item>
					<el-form-item label="工资始发日期">
						<el-date-picker
							v-model="updateForm.salary_start"
							format="YYYY/MM/DD"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="工资始发日期"
							:size="'default'"
						/>
					</el-form-item>
					<el-form-item label="转正日期">
						<el-date-picker
							v-model="updateForm.regular_time"
							format="YYYY/MM/DD"
							value-format="YYYY-MM-DD"
							type="date"
							placeholder="转正日期"
							:size="'default'"
						/>
					</el-form-item>
					<el-form-item label="银行账户名称">
						<el-input
							v-model="updateForm.bank_account"
							placeholder="银行账户名称"
						/>
					</el-form-item>
					<el-form-item label="银行名称">
						<el-select
							v-model="updateForm.bank_name"
							placeholder="银行名称"
						>
							<el-option label="工商银行" value="工商银行" />
							<el-option label="建设银行" value="建设银行" />
							<el-option label="邮政银行" value="邮政银行" />
						</el-select>
					</el-form-item>
					<el-form-item label="银行卡号">
						<el-input
							v-model="updateForm.bank_ID"
							placeholder="银行卡号"
						/>
					</el-form-item>
					<el-form-item label="社保状态">
						<el-select
							v-model="updateForm.social_state"
							placeholder="社保状态"
						>
							<el-option label="参保缴费" value="参保缴费" />
							<el-option label="冻状态" value="冻状态" />
							<el-option label="暂停缴费" value="暂停缴费" />
						</el-select>
					</el-form-item>
					<el-form-item label="社保缴纳基数">
						<el-input
							v-model="updateForm.social_cardinal"
							placeholder="社保缴纳基数"
						/>
					</el-form-item>
					<el-form-item label="养老保险">
						<el-input
							v-model="updateForm.provide_insurance"
							placeholder="养老保险"
						/>
					</el-form-item>
					<el-form-item label="医疗保险">
						<el-input
							v-model="updateForm.medical_insurance"
							placeholder="医疗保险"
						/>
					</el-form-item>
					<el-form-item label="失业保险">
						<el-input
							v-model="updateForm.unemployment_insurance"
							placeholder="失业保险"
						/>
					</el-form-item>
					<el-form-item label="公积金">
						<el-input
							v-model="updateForm.accumulation"
							placeholder="公积金"
						/>
					</el-form-item>
					<el-form-item label="工会费" prop="admission">
						<el-input
							v-model="addForm.admission"
							placeholder="工会费"
						/>
					</el-form-item>
					<el-form-item label="工资比率" prop="salarys">
						<el-input
							v-model="addForm.salarys"
							placeholder="工资比率"
						/>
					</el-form-item>
					<el-form-item label="基础工资">
						<el-input
							v-model="updateForm.basic_wage"
							placeholder="基础工资"
						/>
					</el-form-item>
					<el-form-item label="部门" prop="college_id">
						<el-select
							v-model="updateForm.college_id"
							placeholder="部门"
						>
							<el-option
								v-for="item of tableData"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							/>
						</el-select>
					</el-form-item>
					<el-form-item label="角色">
						<el-select
							v-model="updateForm.role_id"
							multiple
							placeholder="Select"
							style="width: 240px"
							aria-placeholder="角色"
						>
							<el-option label="员工" value="staff" />
							<el-option label="管理员" value="admin" />
							<el-option label="总理" value="boss" />
						</el-select>
					</el-form-item>
				</el-form>
			</div>
		</template>
		<template #footer>
			<div style="flex: auto">
				<el-button @click="cancel()">取消</el-button>
				<el-button
					v-show="formStatus == 'update'"
					type="primary"
					@click="confirmClickUpdate"
					>修改</el-button
				>
				<el-button
					v-show="formStatus == ''"
					type="primary"
					@click="confirmClickAdd"
					>确定</el-button
				>
			</div>
		</template>
	</el-drawer>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { getCurrentInstance } from "vue";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import sysConfig from "@/config";
import tool from "@/utils/tool";
// import { genFileId } from 'element-plus'
const addFormRef = ref();
const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties;
const UserList = ref([]);
const draweradd = ref(false); // 右侧弹出层是否弹出
const direction = ref("rtl"); //弹出层位置
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const userPage = reactive({
	// 分页信息
	page: 1,
	pagesize: 10,
	keyword: "",
});

const total = ref(""); //总数
const addForm = reactive({});
const updateForm = ref({});
const formStatus = ref(""); //弹出层form状态
const tableData = ref([]);
const upload = ref([]);

// 身份证校验函数
function IdentityCodeValid(rule, value, callback) {
	let city = {
		11: "北京",
		12: "天津",
		13: "河北",
		14: "山西",
		15: "内蒙古",
		21: "辽宁",
		22: "吉林",
		23: "黑龙江",
		31: "上海",
		32: "江苏",
		33: "浙江",
		34: "安徽",
		35: "福建",
		36: "江西",
		37: "山东",
		41: "河南",
		42: "湖北",
		43: "湖南",
		44: "广东",
		45: "广西",
		46: "海南",
		50: "重庆",
		51: "四川",
		52: "贵州",
		53: "云南",
		54: "西藏",
		61: "陕西",
		62: "甘肃",
		63: "青海",
		64: "宁夏",
		65: "新疆",
		71: "台湾",
		81: "香港",
		82: "澳门",
		91: "国外",
	};
	if (!value) {
		return true, callback();
	}
	if (
		!value ||
		!/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(
			value
		)
	) {
		callback(new Error("身份证号格式错误"));
	} else if (!city[value.substr(0, 2)]) {
		callback(new Error("地址编码错误"));
	} else {
		if (value.length == 18) {
			value = value.split("");
			let factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
			let parity = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2];
			let sum = 0;
			let ai = 0;
			let wi = 0;
			for (let i = 0; i < 17; i++) {
				ai = value[i];
				wi = factor[i];
				sum += ai * wi;
			}
			if (parity[sum % 11] != value[17]) {
				callback(new Error("校验位错误"));
			} else {
				return true, callback();
			}
		}
	}
}

const limitInputNumber = (val) => {
	if (val) {
		return String(val).replace(/\D/g, "");
	}
	return val;
};

const cancel = () => {
	closeDrawer();
};
const addRule = reactive({
	name: [{ required: true, message: "必填", trigger: "blur" }],
	entry_time: [{ required: true, message: "必填", trigger: "blur" }],
	salarys: [{ required: true, message: "必填", trigger: "blur" }],
	role_id: [{ required: true, message: "必填", trigger: "blur" }],
	college_id: [{ required: true, message: "必填", trigger: "blur" }],
	number: [
		{
			type: "number",
			message: "只能是数字",
			trigger: "blur",
			required: false,
		},
	],
	user_ID: [
		{
			validate: IdentityCodeValid,
			trigger: "change",
			required: false,
		},
	],
});
// 添加form 清空
const closeDrawer = () => {
	clear(addForm);
	draweradd.value = false;
};
// 清空reactive
const clear = (form) => {
	Object.keys(form).map((key) => {
		delete form[key];
	});
};
// 发送文件请求头
let header = computed(() => {
	let token = tool.cookie.get("TOKEN");
	let prefix = sysConfig.TOKEN_PREFIX + token;
	return {
		Authorization: prefix,
	};
});
// 格式化日期
const timeFormatter = (row, column, cellValue) => {
	let format = "YYYY-mm-dd";
	//  HH:MM:SS
	let date = new Date(cellValue);
	const dataItem = {
		"Y+": date.getFullYear().toString(),
		"m+": (date.getMonth() + 1).toString(),
		"d+": date.getDate().toString(),
		// "H+": date.getHours().toString(),
		// "M+": date.getMinutes().toString(),
		// "S+": date.getSeconds().toString()
	};
	Object.keys(dataItem).forEach((item) => {
		const ret = new RegExp(`(${item})`).exec(format);
		if (ret) {
			format = format.replace(
				ret[1],
				ret[1].length === 1
					? dataItem[item]
					: dataItem[item].padStart(ret[1].length, "0")
			);
		}
	});
	return format;
};

// 上传后清除缓存
const uploadSuccess = (uploadFile) => {
	ElMessage.success("信息导入成功");
	if (uploadFile.waring.email.length > 0) {
		ElNotification({
			title: "Warning",
			message: `${[...uploadFile.waring.email]}行邮箱重复`,
			type: "warning",
			duration: 0,
		});
	}
	if (uploadFile.waring.phone.length > 0) {
		ElNotification({
			title: "Warning",
			message: `${[...uploadFile.waring.phone]}行手机号重复`,
			type: "warning",
			duration: 0,
		});
	}
	if (uploadFile.waring.user_ID > 0) {
		ElNotification({
			title: "Warning",
			message: `${[...uploadFile.waring.user_ID]}行身份证重复`,
			type: "warning",
			duration: 0,
		});
	}

	getUserList();
	console.log(uploadFile.waring);
	upload.value.clearFiles();
	upload.value = [];
};

// 修改用户状态
const UpdateStatus = async (row) => {
	// row.password = _this.$TOOL.crypto.MD5(row.password)
	await _this.$API.user.userlistStatus.patch(row);
	getUserList();
};

// 修改按钮
const updateRowBtn = (row) => {
	draweradd.value = true;
	formStatus.value = "update"; // 弹出层变为修改状态
	updateForm.value = row;
};

// 添加按钮
const addBtn = () => {
	handleDeparment();
	draweradd.value = true;
	formStatus.value = "";
};

// 修改确认框
const confirmClickUpdate = async () => {
	let res = await _this.$API.user.userlistUpdate.put(updateForm.value); // eslint-disable-line no-unused-vars
	console.log(res);
	if (res.code == 200) {
		ElMessage({
			type: "success",
			message: res.message,
		});
		draweradd.value = false;
		updateForm.value = {};
	}
};

// 删除用户确认框
const deleteRow = async (index) => {
	ElMessageBox.confirm("是否确定删除该用户", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	})
		.then(async () => {
			ElMessage({
				type: "success",
				message: "删除成功",
			});
			let res = await _this.$API.user.userlistDelete.delete({
				id: index.id,
			});
			getUserList();
		})
		.catch(() => {
			ElMessage({
				type: "info",
				message: "取消删除",
			});
		});
};

// 获取用户列表
const getUserList = async () => {
	let res = await _this.$API.user.userlist.get(userPage); // eslint-disable-line no-unused-vars
	// res.data['role'] = res.data['role__role_name']     //更改role键名
	// delete res.data['role__role_name']
	// res.data.forEach((item) => {
	// 	item.role = JSON.parse(item.role__role_name);
	// 	item.sex = String(item.sex);
	// });
	UserList.value = res.data;
	total.value = res.total;
	console.log(UserList.value);
};

//  确认添加弹出层
const confirmClickAdd = () => {
	addFormRef.value.validate(async (valid, fields) => {
		if (valid) {
			addForm.password = _this.$TOOL.crypto.MD5(123456);
			let res = await _this.$API.user.userlistPost.post(addForm);
			if (res.code !== 200) {
				console.log();
			} else {
				ElMessage({
					type: "success",
					message: res.message,
				});
				draweradd.value = false;
				Object.keys(addForm).map((key) => {
					delete addForm[key];
				});
			}
			getUserList();
		} else {
			console.log("error submit!", fields);
		}
	});
};

// 分页
const handleSizeChange = (val) => {
	console.log(`${val} items per page`);
	userPage.pagesize = val;
	getUserList();
};
// 分页
const handleCurrentChange = (val) => {
	console.log(`current page: ${val}`);
	userPage.page = val;
	getUserList();
};

// 获取部门列表
const handleDeparment = async () => {
	let res = await _this.$API.department.deparList.get();
	if (res.code == 200) {
		tableData.value = res.data;
		ElMessage({
			type: "success",
			message: res.message,
		});
	}
};

onMounted(() => {
	getUserList();
});
</script>

<style scoped lang="scss">
.demo-pagination-block + .demo-pagination-block {
	margin-top: 10px;
}

.demo-pagination-block .demonstration {
	margin-bottom: 16px;
}

.head {
	display: flex;
	height: 42px;
	line-height: 42px;
	position: relative;

	.right {
		position: absolute;
		top: -0.5vw;
		right: 1vw;
		float: right;
	}
}
</style>
